import React,{useRef, useState} from 'react'

export default function App() {
    const containerElementRef = useRef(null);
    // dom 模板编译 -> 数据的交换 -> React.createElement 虚拟DOM  + render
    const [message, setMessage] = useState(
        'click Button to get container width'
    )
    const calculateContainerWidth = () => {
        setMessage(`Container width:
        ${containerElementRef.current.clientWidth}`)
    }
  return (
    <div>
        <div className="container" ref={containerElementRef}>
            <h2>{message}</h2>
            <button onClick={calculateContainerWidth}>
                Calculate container width
            </button>
        </div>
    </div>
  )
}
